<template>
  <view class="case-detail">
    <!-- 案件基本信息 -->
    <view class="detail-card">
      <view class="card-header">
        <text class="case-title">{{ caseInfo.caseTitle }}</text>
        <text class="case-status" :class="caseInfo.status">{{ getStatusText(caseInfo.status) }}</text>
      </view>
      
      <view class="info-item">
        <text class="label">案件编号：</text>
        <text class="value">{{ caseInfo.caseId }}</text>
      </view>
      
      <view class="info-item">
        <text class="label">创建人：</text>
        <text class="value">{{ formatDate(caseInfo.createBy) }}</text>
      </view>
      
      <view class="info-item">
        <text class="label">案件类别：</text>
        <text class="value">{{ caseInfo.caseCategory }}</text>
      </view>
      
    </view>

    <!-- 案件详细内容 -->
    <view class="detail-content">
      <rich-text :nodes="caseInfo.caseContent"></rich-text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons" v-if="hasPermission">
      <button @click="handleEdit" type="primary">编辑</button>
      <button @click="handleDelete" type="warn">删除</button>
    </view>
  </view>
</template>

<script>
import { getCaseDetail, deleteCase } from '@/api/case'

export default {
  data() {
    return {
      caseId: null,
      caseInfo: {},
      hasPermission: false
    }
  },

  onLoad(options) {
    if (options.id) {
      this.caseId = options.id
      this.fetchCaseDetail()
    }
  },

  methods: {
    async fetchCaseDetail() {
      try {
        const response = await getCaseDetail(this.caseId)
        this.caseInfo = response.data
        // 检查权限，这里可以根据实际需求修改
        this.hasPermission = true
      } catch (error) {
        uni.showToast({
          title: '获取案例详情失败',
          icon: 'none'
        })
      }
    },

    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || status
    },

    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },

    handleEdit() {
      uni.navigateTo({
        url: `/pages/case/edit?id=${this.caseId}`
      })
    },

    async handleDelete() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个案例吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await deleteCase(this.caseId)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } catch (error) {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style>
.case-detail {
  padding: 20rpx;
}

.detail-card {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.case-title {
  font-size: 36rpx;
  font-weight: bold;
}

.case-status {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.case-status.pending {
  background-color: #ffd700;
}

.case-status.processing {
  background-color: #87ceeb;
}

.case-status.completed {
  background-color: #90ee90;
}

.case-status.cancelled {
  background-color: #ff6b6b;
}

.info-item {
  margin-bottom: 16rpx;
  display: flex;
  align-items: flex-start;
}

.info-item .label {
  width: 160rpx;
  color: #666;
  font-size: 28rpx;
}

.info-item .value {
  flex: 1;
  font-size: 28rpx;
}

.description {
  margin-top: 20rpx;
}

.description .value {
  line-height: 1.6;
}

.detail-content {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 120rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.action-buttons button {
  width: 45%;
}
</style> 